import React, { Component } from "react";
import { View, Text, TouchableOpacity, TextInput } from "react-native";
import NavBarConfig from "../modules/NavBar";
import { CASES } from "../../config/Api";
import http from "../../util/http";
import { toast } from "../../util/tip";
import feedStyles from "../../style/pages/feedback";

class Feedback extends Component {
  static navigationOptions = ({ navigation }) =>
    NavBarConfig(
      {
        headerTitle: "問題反饋",
        headerRight: []
      },
      navigation
    );

  state = {
    desc: "",
    isRequesting: false
  };

  async handleFeedBack() {
    if (this.state.isRequesting) return;
    let value = this.state.desc.trim();
    if (!value) {
      toast("請您填寫反饋內容");
      return;
    }
    await this.setState({
      isRequesting: true
    });
    const data = await http.post(CASES, {
      desc: value
    });
    if (data) {
      toast("反饋成功");
      this.props.navigation.goBack();
    }
    await this.setState({
      isRequesting: false
    });
  }

  handleInput(text) {
    this.setState({
      desc: text.trim()
    });
  }

  render() {
    return (
      <View>
        <View style={feedStyles.feedBackContainer}>
          <TextInput
            multiline={true}
            style={feedStyles.contain}
            placeholder="請輸入反饋內容"
            maxLength={250}
            underlineColorAndroid="transparent"
            onChangeText={this.handleInput.bind(this)}
          />
          <Text feedSpan>{this.state.desc.length} / 250</Text>
        </View>

        <TouchableOpacity onPress={this.handleFeedBack.bind(this)}>
          <Text style={feedStyles.submit}>提交</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default Feedback;
